import QtQuick 2.0
import QtMultimedia 5.0

Item {
    id: musicPlayer
    transform: Scale {xScale: 2; yScale: 2}

    property int songID
    property int sign
    property int songDuration: 0
    property real songVolume: 0.8
    property int textSize: 12

    property string theme: "green"
    property string topcolor: "#ff38761d"
    property string bgcolor: "#ffd9ead3"
    property string rowcolor2: "#93c47d"
    property string rowcolor1: "#ff6aa84f"
    property string linecolor: "#274e13"
    property string linecolor2: "#38761d"

    property string playImage: "images/button_play_green.png"
    property string pauseImage: "images/button_pause_green.png"
    property string stopImage: "images/button_stop_green.png"
    property string volumImage: "images/volume_green.png"

    function setTheme(){
        if(musicPlayer.theme === "green"){
            musicPlayer.topcolor = "#FF38761D"
            musicPlayer.bgcolor = "#FFD9EAD3"
            musicPlayer.rowcolor2 = "#93C47D"
            musicPlayer.rowcolor1 = "#FF6AA84F"
            musicPlayer.linecolor = "#274E13"
            musicPlayer.linecolor2 = "#38761D"
            musicPlayer.playImage = "images/button_play_green.png"
            musicPlayer.pauseImage = "images/button_pause_green.png"
            musicPlayer.stopImage = "images/button_stop_green.png"
            musicPlayer.volumImage = "images/volume_green.png"
        }else if(musicPlayer.theme === "blue"){
            musicPlayer.topcolor = "#FF0B5394"
            musicPlayer.bgcolor = "#FFCFE2F3"
            musicPlayer.rowcolor2 = "#FF6FA8DC"
            musicPlayer.rowcolor1 = "#FF3D85C6"
            musicPlayer.linecolor = "#073763"
            musicPlayer.linecolor2 = "#0b5394"
            musicPlayer.playImage = "images/button_play_blue.png"
            musicPlayer.pauseImage = "images/button_pause_blue.png"
            musicPlayer.stopImage = "images/button_stop_blue.png"
            musicPlayer.volumImage = "images/volume_blue.png"
        }else if(musicPlayer.theme === "red"){
            musicPlayer.topcolor = "#ff990000"
            musicPlayer.bgcolor = "#fff4cccc"
            musicPlayer.rowcolor2 = "#ffe06666"
            musicPlayer.rowcolor1 = "#ffcc0000"
            musicPlayer.linecolor = "#660000"
            musicPlayer.linecolor2 = "#990000"
            musicPlayer.playImage = "images/button_play_red.png"
            musicPlayer.pauseImage = "images/button_pause_red.png"
            musicPlayer.stopImage = "images/button_stop_red.png"
            musicPlayer.volumImage = "images/volume_red.png"
        }
    }

    Rectangle {  // top bar
        id: topBar
        x: 30
        y: 30
        width: 775
        height: 40
        color: musicPlayer.topcolor
        Image {
            id: image1
            source: musicPlayer.playImage
            x: 20
            width: 40
            height: 40
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (songID === 1) {
                        playMusic1.play();
                        playMusic2.stop();
                        playMusic3.stop();
                        playMusic4.stop();
                        playMusic5.stop();
                        progressPoint.visible = true;

                        animation.running = true;
                        if (sign === 0) {
                            animation.resume();
                        }
                        if (sign === 1) {
                            animation.start();
                        }
                    }
                    if (songID === 2) {
                        playMusic1.stop();
                        playMusic2.play();
                        playMusic3.stop();
                        playMusic4.stop();
                        playMusic5.stop();
                        progressPoint.visible = true;

                        animation.running = true;
                        if (sign === 0) {
                            animation.resume();
                        }
                        if (sign === 1) {
                            animation.start();
                        }
                    }
                    if (songID === 3) {
                        playMusic1.stop();
                        playMusic2.stop();
                        playMusic3.play();
                        playMusic4.stop();
                        playMusic5.stop();
                        progressPoint.visible = true;

                        animation.running = true;
                        if (sign === 0) {
                            animation.resume();
                        }
                        if (sign === 1) {
                            animation.start();
                        }
                    }
                    if (songID === 4) {
                        playMusic1.stop();
                        playMusic2.stop();
                        playMusic3.stop();
                        playMusic4.play();
                        playMusic5.stop();
                        progressPoint.visible = true;

                        animation.running = true;
                        if (sign === 0) {
                            animation.resume();
                        }
                        if (sign === 1) {
                            animation.start();
                        }
                    }
                    if (songID === 5) {
                        playMusic1.stop();
                        playMusic2.stop();
                        playMusic3.stop();
                        playMusic4.stop();
                        playMusic5.play();
                        progressPoint.visible = true;

                        animation.running = true;
                        if (sign === 0) {
                            animation.resume();
                        }
                        if (sign === 1) {
                            animation.start();
                        }
                    }
                }
            }
        }
        Image {
            id: image2
            source: musicPlayer.pauseImage
            x: 80
            width: 40
            height: 40

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    sign = 0;
                    playMusic1.pause()
                    playMusic2.pause()
                    playMusic3.pause()
                    playMusic4.pause()
                    playMusic5.pause()
                    animation.pause();
                }
            }
        }
        Image {
            id: image3
            source: musicPlayer.stopImage
            x: 140
            width: 40
            height: 40

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    sign = 1;
                    playMusic1.stop()
                    playMusic2.stop()
                    playMusic3.stop()
                    playMusic4.stop()
                    playMusic5.stop()
                    animation.stop()
                    progressPoint.x = 270;
                    progressPoint.visible = false;
                    selected1.visible = false;
                    selected2.visible = false;
                    selected3.visible = false;
                    selected4.visible = false;
                    selected5.visible = false;
                }
            }
        }

        Text {
            x: 230
            y: 12
            text: "0:00"
            color: "white"
            font.bold: true
            font.pointSize: 10
            style: Text.Raised
            styleColor: "black"
        }
        Rectangle {
            id: progressBar
            x: 270
            y: 14
            width: 280
            height: 12
            color: musicPlayer.bgcolor
            radius: 3
        }
        Rectangle {
            id: progressPoint
            visible: false
            x: 270
            y: 12
            width: 16
            height: 16
            radius: 8
            color: musicPlayer.linecolor

            PropertyAnimation {
                id: animation
                target: progressPoint;
                property: "x";
                from: progressPoint.x-2;
                to: progressBar.x+progressBar.width-progressPoint.width+2;
                duration: songDuration;
            }
        }

        Text {
            id: timeEnd
            x: 560
            y: 12
            text: ""
            color: "white"
            font.bold: true
            font.pointSize: 10
            style: Text.Raised
            styleColor: "black"
        }

        Image {
            id: image4
            x: 630
            y: 8
            width: 25
            height: 25
            source: "images/gnome_audio_volume_high.png"
        }
        Image {
            id: image5
            x: 630
            y: -10
            width: 160
            height: 60
            source: musicPlayer.volumImage
        }
        Rectangle {
            id: volumeBar
            x:730
            y:8
            width: 3
            height: 25
            color: musicPlayer.linecolor
            MouseArea {
                anchors.fill: parent
                drag.target: volumeBar
                drag.axis: Drag.XAxis
                drag.minimumX: image5.x
                drag.maximumX: image5.x+image5.width
            }
        }
    }

    Rectangle { // title bar
        x: 30
        y: 78
        width: 775
        height: 40
        color: musicPlayer.topcolor

        Text {
            x: 10
            y: 7
            text: "Song"
            color: "white"
            font.bold: true
            font.pointSize: 16
            style: Text.Raised
            styleColor: "black"
        }
        Rectangle {
            x: 220
            y: 1
            width: 1
            height: parent.height-2
            color: musicPlayer.linecolor
        }
        Text {
            x: 230
            y: 7
            text: "Time"
            color: "white"
            font.bold: true
            font.pointSize: 16
            style: Text.Raised
            styleColor: "black"
        }
        Rectangle {
            x: 320
            y: 1
            width: 1
            height: parent.height-2
            color: musicPlayer.linecolor
        }
        Text {
            x: 330
            y: 7
            text: "Artist"
            color: "white"
            font.bold: true
            font.pointSize: 16
            style: Text.Raised
            styleColor: "black"
        }
        Rectangle {
            x: 450
            y: 1
            width: 1
            height: parent.height-2
            color: musicPlayer.linecolor
        }
        Text {
            x: 460
            y: 7
            text: "Album"
            color: "white"
            font.bold: true
            font.pointSize: 16
            style: Text.Raised
            styleColor: "black"
        }
        Rectangle {
            x: 620
            y: 1
            width: 1
            height: parent.height-2
            color: musicPlayer.linecolor
        }
        Text {
            x: 630
            y: 7
            text: "Genre"
            color: "white"
            font.bold: true
            font.pointSize: 16
            style: Text.Raised
            styleColor: "black"
        }
    }

    // song 1
    Rectangle {
        id: music1
        x: 30
        y: 126
        width: 775
        height: 40
        color: musicPlayer.rowcolor2

        Audio {
            id: playMusic1
            volume: songVolume
            source: "songs/Rolling in the deep Adele.mp3"
        }

        MouseArea {
            id: playArea1
            anchors.fill: parent
            onPressed:  {
                songID = 1;
                selected1.visible = true;
                selected2.visible = false;
                selected3.visible = false;
                selected4.visible = false;
                selected5.visible = false;
                animation.stop()
                progressPoint.x = 270;
                progressPoint.visible = false;
                timeEnd.text = "3:47";
                songDuration = playMusic1.duration;
            }
        }

        Text {
            x: 10
            y: 9
            text: "Rolling in the Deep"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 230
            y: 9
            text: "3:47"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 330
            y: 9
            text: "Adele"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 460
            y: 8
            text: "21"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 630
            y: 9
            text: "Pop/Soul/R&B"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
    }

    // song 2
    Rectangle {
        id: music2
        x: 30
        y: 168
        width: 775
        height: 40
        color: musicPlayer.rowcolor1

        Audio {
            id: playMusic2
            volume: songVolume
            source: "songs/Someone like you.mp3"
        }

        MouseArea {
            id: playArea2
            anchors.fill: parent
            onPressed:  {
                songID = 2;
                selected1.visible = false;
                selected2.visible = true;
                selected3.visible = false;
                selected4.visible = false;
                selected5.visible = false;
                animation.stop()
                progressPoint.x = 270;
                progressPoint.visible = false;
                timeEnd.text = "5:00";
                songDuration = playMusic2.duration;
            }
        }

        Text {
            x: 10
            y: 9
            text: "Someone like you"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 230
            y: 9
            text: "5:00"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 330
            y: 9
            text: "Adele"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 460
            y: 8
            text: "21"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 630
            y: 9
            text: "Pop/Soul"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
    }

    // song 3
    Rectangle {
        id: music3
        x: 30
        y: 210
        width: 775
        height: 40
        color: musicPlayer.rowcolor2

        Audio {
            id: playMusic3
            volume: songVolume
            source: "songs/Halo Beyonce.mp3"
        }

        MouseArea {
            id: playArea3
            anchors.fill: parent
            onPressed:  {
                songID = 3;
                selected1.visible = false;
                selected2.visible = false;
                selected3.visible = true;
                selected4.visible = false;
                selected5.visible = false;
                animation.stop()
                progressPoint.x = 270;
                progressPoint.visible = false;
                timeEnd.text = "4:09";
                songDuration = playMusic3.duration;
            }
        }

        Text {
            x: 10
            y: 9
            text: "Halo"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 230
            y: 9
            text: "4:09"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 330
            y: 9
            text: "Beyoncé"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 460
            y: 9
            text: "I Am... Sasha Fierce"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 630
            y: 9
            text: "R&B/Pop"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
    }

    // song 4
    Rectangle {
        id: music4
        x: 30
        y: 252
        width: 775
        height: 40
        color: musicPlayer.rowcolor1

        Audio {
            id: playMusic4
            volume: songVolume
            source: "songs/If i were a boy Beyonce.mp3"
        }

        MouseArea {
            id: playArea4
            anchors.fill: parent
            onPressed:  {
                songID = 4;
                selected1.visible = false;
                selected2.visible = false;
                selected3.visible = false;
                selected4.visible = true;
                selected5.visible = false;
                animation.stop()
                progressPoint.x = 270;
                progressPoint.visible = false;
                timeEnd.text = "4:09";
                songDuration = playMusic4.duration;
            }
        }

        Text {
            x: 10
            y: 9
            text: "If I were a boy"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 230
            y: 9
            text: "4:09"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 330
            y: 9
            text: "Beyoncé"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 460
            y: 8
            text: "I Am... Sasha Fierce"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 630
            y: 9
            text: "Pop"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
    }

    // song 5
    Rectangle {
        id: music5
        x: 30
        y: 294
        width: 775
        height: 40
        color: musicPlayer.rowcolor2

        Audio {
            id: playMusic5
            volume: songVolume
            source: "songs/Irreplaceable Beyonce.mp3"
        }

        MouseArea {
            id: playArea5
            anchors.fill: parent
            onPressed:  {
                songID = 5;
                selected1.visible = false;
                selected2.visible = false;
                selected3.visible = false;
                selected4.visible = false;
                selected5.visible = true;
                animation.stop()
                progressPoint.x = 270;
                progressPoint.visible = false;
                timeEnd.text = "3:47";
                songDuration = playMusic5.duration;
            }
        }

        Text {
            x: 10
            y: 9
            text: "Irreplaceable"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 230
            y: 9
            text: "3:47"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 330
            y: 9
            text: "Beyoncé"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 460
            y: 8
            text: "B' Day"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
        Text {
            x: 630
            y: 9
            text: "Pop/R&B"
            color: musicPlayer.linecolor
            font.bold: true
            font.pointSize: textSize
        }
    }

    //
    Rectangle {
        x: 30
        y: 336
        width: 775
        height: 40
        color: musicPlayer.rowcolor1
    }

    // lines
    Rectangle {
        x: 250
        y: 126+1
        width: 1
        height: 250-2
        color: musicPlayer.linecolor2
    }
    Rectangle {
        x: 350
        y: 126+1
        width: 1
        height: 250-2
        color: musicPlayer.linecolor2
    }
    Rectangle {
        x: 480
        y: 126+1
        width: 1
        height: 250-2
        color: musicPlayer.linecolor2
    }
    Rectangle {
        x: 650
        y: 126+1
        width: 1
        height: 250-2
        color: musicPlayer.linecolor2
    }
    // end - lines

    //highlight
    Rectangle {
        id: selected1
        visible: false
        x: 30
        y: 126
        width: 775
        height: 40
        opacity: 0.3
        color: "black"
    }
    Rectangle {
        id: selected2
        visible: false
        x: 30
        y: 168
        width: 775
        height: 40
        opacity: 0.3
        color: "black"
    }
    Rectangle {
        id: selected3
        visible: false
        x: 30
        y: 210
        width: 775
        height: 40
        opacity: 0.3
        color: "black"
    }
    Rectangle {
        id: selected4
        visible: false
        x: 30
        y: 252
        width: 775
        height: 40
        opacity: 0.3
        color: "black"
    }
    Rectangle {
        id: selected5
        visible: false
        x: 30
        y: 294
        width: 775
        height: 40
        opacity: 0.3
        color: "black"
    }
}
